import React from "react";
import { Checkbox } from "antd";
import { openNotificationWithIcon } from "@/utils/comm";
import ExternalData from '@/pages/flowmanage/formbuilder/components/itemcomponent/ExternalData';
import styles from "./ExternalSetter.less";

const getSetter = (defaultOption) => {
  class OptionAdd extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        checkValue: false,
        visible: false,
      };
      this.openNotificationWithIcon = openNotificationWithIcon;
    }

    componentDidMount() {
      const { value } = this.props;
      let checkboxValue = false;
      if (value && value.params) {
        // 若存在 params 字段，判断对象是否不是空对象
        checkboxValue = JSON.stringify(value.params) !== "{}";
      }

      this.setState({ checkValue: checkboxValue });
    }

    componentWillUnmount() {}

    onCheckboxChange = (e) => {
      // console.log(e);
      const { onChange, form } = this.props;
      this.setState({ checkValue: e.target.checked, visible: e.target.checked });
      // 勾选外部数据
      if (e.target.checked) {
        onChange({ params: {} });
        form.setFieldsValue({
          options: [],
        });
      } else {
        onChange({ params: {} });
        form.setFieldsValue({
          options: [...defaultOption],
        });
      }
    };

    handleTaskVisible = (visible, clearData = false) => {
      const { form, onChange } = this.props;
      this.setState({ visible });
      if (clearData) {
        form.setFieldsValue({
          options: [...defaultOption],
        });
        onChange({ params: {} });
        this.setState({ checkValue: false });
      }
    };

    handleOptionsChange = ({ params, options }) => {
      const { onChange, form } = this.props;
      form.setFieldsValue({ options });
      onChange({ params });
    }

    render() {
      const {
        className = "",
        label,
        value,
      } = this.props;
      const { checkValue, visible } = this.state;

      let checkboxValue = false;
      if (value && value.params) {
        // 若存在 params 字段，判断对象是否不是空对象
        checkboxValue = JSON.stringify(value.params) !== "{}";
      }

      return (
        <div
          className={`item__lable  ${styles.lable} ${className}`}
        >
          {label}
          ：
          <Checkbox
            onChange={this.onCheckboxChange}
            checked={checkboxValue && checkValue}
            key="1"
          >
            外部数据
          </Checkbox>
          {checkboxValue && checkValue && (
            <span
              className={styles.review}
              onClick={() => this.handleTaskVisible(true)}
            >
              查看
            </span>
          )}
          {visible && (
            <ExternalData
              visible={visible}
              onCancel={this.handleTaskVisible}
              handleOptionsChange={this.handleOptionsChange}
              selectedItem={value}
            />
          )}
        </div>

      );
    }
  }
  return OptionAdd;
};
export default getSetter;
